<template>
  <div class="app-container">
    <el-card>
      <div>
        <el-row :gutter="20" style="display: inline-flex;padding: 20px 0">
          <el-col style="min-width: 240px">
            <el-input
              v-model="page.key"
              placeholder="请输入内容"
              @keyup.enter.native="getList"
            />
          </el-col>

          <el-col>
            <el-button v-permission="`get:/sys/user/list`" type="primary" icon="el-icon-search" @click.native.prevent="getList">搜索</el-button>
          </el-col>
        </el-row>
      </div>

      <div>
        <el-row :gutter="20" style="display: inline-flex;padding: 20px 0">
          <el-col>
            <el-button v-permission="`post:/sys/user/add`" type="primary" plain icon="el-icon-plus" @click.native.prevent="openAdd">添加用户</el-button>
          </el-col>

          <el-col>
            <el-button
              v-permission="`post:/sys/user/delete`"
              type="danger"
              plain
              icon="el-icon-delete"
              :disabled="selection.length===0"
              @click.native.prevent="handleDelete"
            >删除</el-button>
          </el-col>
        </el-row>
      </div>

      <el-row style="padding: 20px 0">
        <el-table v-permission="`get:/sys/user/list`" :data="datalist" @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="userId"
            label="ID"
          />

          <el-table-column
            prop="userName"
            label="用户名"
          />

          <el-table-column
            prop="name"
            label="名字/昵称"
          />

          <el-table-column
            label="状态"
          ><template slot-scope="scope">
            {{ scope.row.status===0 ? '正常':'禁用' }}
            <el-switch
              v-model="scope.row.status"
              v-permission="`post:/sys/user/status/switch`"
              :active-value="0"
              :inactive-value="-1"
              @change="statusSwitch(scope.row)"
            />
          </template>
          </el-table-column>

          <el-table-column
            prop="phone"
            label="手机号"
          />
          <el-table-column
            label="角色"
          ><template slot-scope="scope">
            <el-tag v-for="id in scope.row.roleIds">
              {{ roles.find(e=>e.roleId===id).name }}
            </el-tag>
          </template>
          </el-table-column>

          <el-table-column
            label="操作"
          ><template slot-scope="scope">
            <el-button
              v-permission="`post:/sys/user/edite`"
              plain
              type="text"
              icon="el-icon-edit"
              @click.native.prevent="openEdite(scope.row)"
            >编辑</el-button>
            <el-button
              v-permission="`post:/sys/user/password/reset`"
              plain
              type="text"
              icon="el-icon-edit"
              @click.native.prevent="openResetPass(scope.row)"
            >重置密码</el-button>

          </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row v-permission="`get:/sys/user/list`" style="padding: 20px 0">
        <el-pagination
          :current-page.sync="page.pageNum"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <FormDialog
        ref="addDialog"
        :submit="dialog.submit"
        :title="dialog.title"
        :fields="dialog.fields"
        :rules="dialog.rules"
        :add-form="dialog.addForm"
        :handle-ok="dialog.handleOk"
      />

      <FormDialog
        ref="editeDialog"
        :submit="editeDialog.submit"
        :title="editeDialog.title"
        :fields="dialog.fields"
        :rules="dialog.rules"
        :add-form="editeDialog.addForm"
        :handle-ok="dialog.handleOk"
      />

      <FormDialog
        ref="resetPassDialog"
        :submit="resetPassDialog.submit"
        :title="resetPassDialog.title"
        :fields="resetPassDialog.fields"
        :rules="resetPassDialog.rules"
        :add-form="resetPassDialog.addForm"
        :handle-ok="dialog.handleOk"
      />
    </el-card>
  </div>
</template>

<script>
import { getList, add, del, edite, resetPass, statusSwitch } from '@/api/pp/sys/user'
import { getList as getRoleList } from '@/api/pp/sys/role'
import FormDialog from '@/pp-components/FormDialog.vue'
import permission from '@/directive/permission/index.js'
export default {
  name: 'User',
  components: { FormDialog },
  directives: { permission },
  data() {
    return {
      roles: [],
      dialog: {
        submit: add,
        handleOk: this.getList,
        title: '添加用户',
        fields: [
        ],
        rules: {
          name: [{ required: true, trigger: 'blur', message: '名字/昵称不为空' }],
          userName: [{ required: true, trigger: 'blur', message: '用户名不为空' }],
          phone: [{ pattern: /^$|^1\d{10}$/, trigger: 'blur', message: '手机号格式错误' }],
          password: [{ required: true, trigger: 'blur', message: '密码不为空' },
            { min: 6, max: 18, message: '密码长度在6-18位', trigger: 'blur' }]
        },
        addForm: {

        }
      },
      editeDialog: {
        title: '编辑用户',
        submit: edite,
        addForm: {}
      },
      resetPassDialog: {
        title: '重置密码',
        submit: resetPass,
        addForm: {},
        rules: {
          password: [{ required: true, trigger: 'blur', message: '密码不为空' },
            { min: 6, max: 18, message: '密码长度在6-18位', trigger: 'blur' }]
        },
        fields: [
          { name: 'userName', label: '用户名', disabled: true },
          { name: 'password', label: '密码', type: 'password', tip: '默认密码为admin123' }
        ]
      },
      datalist: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        key: null
      },
      selection: []
    }
  },
  mounted() {
    getRoleList({ pageShow: false }).then(res => {
      this.roles = res.data.list
      this.getList()
    })
  },
  methods: {
    statusSwitch(row) {
      console.log(row)
      statusSwitch({
        userId: row.userId
      }).then(res => {
        this.$msgOk(res)
        this.getList()
      }).catch(() => {
        this.getList()
      })
    },
    openResetPass(row) {
      this.$refs.resetPassDialog.show()
      this.resetPassDialog.addForm =
        { userId: row.userId, userName: row.userName, password: 'admin123' }
    },
    openEdite(row) {
      getRoleList({ pageShow: false }).then(res => {
        const options = []
        res.data.list.forEach(e => {
          options.push({ label: e.name, value: e.roleId })
        })
        this.dialog.fields = [
          { name: 'name', label: '姓名/昵称' },
          { name: 'phone', label: '手机号', type: 'number' },
          { name: 'roleIds', label: '角色', type: 'select', multiple: true,
            options: options }
        ]
      })
      this.editeDialog.addForm = { ...row }
      this.$refs.editeDialog.show()
    },
    handleDelete() {
      const userIds = []
      this.selection.forEach(e => {
        userIds.push(e.userId)
      })
      del(userIds.join(',')).then(res => {
        this.$msgOk(res)
        this.selection = []
        this.getList()
      })
    },
    handleSelectionChange(val) {
      this.selection = val
    },
    openAdd() {
      getRoleList({ pageShow: false }).then(res => {
        const options = []
        res.data.list.forEach(e => {
          options.push({ label: e.name, value: e.roleId })
        })
        this.dialog.fields = [
          { name: 'name', label: '姓名/昵称' },
          { name: 'userName', label: '用户名' },
          { name: 'password', label: '密码', type: 'password', tip: '默认密码为admin123' },
          { name: 'phone', label: '手机号', type: 'number' },
          { name: 'roleIds', label: '角色', type: 'select', multiple: true,
            options: options }
        ]
        this.dialog.addForm.password = 'admin123'
      })
      this.$refs.addDialog.show()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.pageNum = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getList()
    },
    getList() {
      getList(this.page).then(res => {
        this.datalist = res.data.list || []
        this.page.total = res.data.total
      })
    }
  }

}
</script>

<style lang="sass" scoped>

</style>
